<style lang="stylus" scoped>
  .left-ico
    line-height 0
    img
      height 35px
</style>

<template>
  <div>
    <q-toolbar class="bg-white shadow-2 text-black common_header justify-between" style="padding: 0 3px 0 15px;min-height: initial; height: 48px;">
      <div class="left-ico row justify-between items-center">
        <img
          @click="$router.push('/index')"
          v-if="!$q.platform.is.mobile"
          class="cursor-pointer gt-xs"
          src="~assets/app_nav_logo.png">
        <div style="text-align: center">
          <q-btn
            flat round dense
            color="dark"
            v-if="!$q.platform.is.mobile"
            @click="$q.fullscreen.toggle()"
            :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
          />
          <q-btn flat round dense icon="menu" color="dark" @click="leftNavCopy = !leftNavCopy" class="q-ml-sm" />
        </div>
      </div>
      <q-tabs shrink @input="navChange" v-model="currentTab">
        <q-route-tab
          v-for="nav in navs"
          :key="nav.to"
          :to="nav.to"
          :name="nav.name"
          :label="nav.label"
          :disable="nav.disable"/>
        <q-btn-dropdown auto-close stretch flat :label="$t('示例')">
          <q-list link>
            <q-item clickable @click="$router.push({ path: '/about' })">
              <q-item-section>关于</q-item-section>
            </q-item>
            <q-item clickable @click="$router.push({ path: '/demo/gantt-sy' })">
              <q-item-section>甘特图 Syncfusion</q-item-section>
            </q-item>
            <q-item clickable @click="$router.push({ path: '/demo/schedule-sy' })">
              <q-item-section>Schedule Syncfusion</q-item-section>
            </q-item>
            <q-item clickable @click="$router.push({ path: '/demo/gantt-kendo' })">
              <q-item-section>甘特图 Kendo</q-item-section>
            </q-item>
            <q-item clickable @click="$router.push({ path: '/demo/list' })">
              <q-item-section>列表Demo</q-item-section>
            </q-item>
            <q-item clickable @click="$router.push({ path: '/demo/order' })">
              <q-item-section>工单Demo</q-item-section>
            </q-item>
            <q-item clickable @click="$router.push({ path: '/demo/detail' })">
              <q-item-section>详情Demo</q-item-section>
            </q-item>
            <q-item clickable @click="$router.push({ path: '/demo/graphical' })">
              <q-item-section>图表Demo</q-item-section>
            </q-item>
            <!-- <q-item clickable @click="$router.push({ path: '/demo/file' })">
              <q-item-section>文件Demo</q-item-section>
            </q-item> -->
            <!-- <q-item clickable @click="$router.push({ path: '/demo/dict' })">
              <q-item-section>字典类型Demo</q-item-section>
            </q-item> -->
          </q-list>
        </q-btn-dropdown>
      </q-tabs>
      <div class="row justify-end items-center">
        <q-select
          style="width:90px;"
          v-if="!$q.platform.is.mobile"
          borderless
          hide-dropdown-icon
          emit-value
          map-options
          v-model="currentLang"
          @input="langChange"
          :options="options" />
        <div v-if="!token">
          <!-- TODO:  这边为了演示  先暂时去掉按钮 -->
          <q-btn flat :label="$t('登录')" @click="toLogin" v-if="!$q.platform.is.mobile"/>
          <q-btn flat :label="$t('注册')" @click="toRegister" v-if="!$q.platform.is.mobile"/>
        </div>
        <q-btn-dropdown
          split
          size="md"
          flat
          no-caps
          auto-close
          stretch
          v-else
          :label="$t('您好')+ ',' + user"
        >
          <q-list>
            <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-avatar>
                  <img src="assets/user_avatar.jpeg" alt="">
                </q-avatar>
              </q-item-section>
              <q-item-section>
                <q-item-label>我的信息</q-item-label>
                <q-item-label caption>2019.03.17</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="edit" color="secondary" />
              </q-item-section>
            </q-item>
            <!-- <q-item clickable v-close-popup @click="onItemClick">
              <q-item-section avatar>
                <q-avatar icon="message" color="secondary" text-color="white" />
              </q-item-section>
              <q-item-section>
                <q-item-label>消息中心</q-item-label>
                <q-item-label caption>21条未读</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="info" color="amber" />
              </q-item-section>
            </q-item> -->
            <q-item clickable v-close-popup @click="loginOut">
              <q-item-section avatar>
                <q-avatar icon="power_settings_new" color="negative" text-color="white" />
              </q-item-section>
              <q-item-section>
                <q-item-label>注销</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
        <q-btn flat round dense icon="menu" color="dark" @click="rightNavCopy = !rightNavCopy" class="q-ml-sm" />
      </div>
    </q-toolbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import languages from 'quasar/lang/index.json'
export default {
  props: {
    leftNav: {
      required: true,
      type: Boolean
    },
    rightNav: {
      required: true,
      type: Boolean
    }
  },
  data () {
    return {
      appFullscreen: false,
      currentTab: 'home',
      // 获取浏览器token
      token: '',
      user: '',
      tab: 'home',
      currentLang: this.$q.lang.isoName,
      options: [
        {
          label: '简体中文',
          value: 'zh-hans'
        },
        {
          label: 'English',
          value: 'en-us'
        }
      ],
      leftNavCopy: this.leftNav,
      rightNavCopy: this.rightNav
    }
  },
  computed: {
    // user () {
    //   console.log(this.$store.state)
    //   return this.$store.state.user.userName
    // },
    navs () {
      return [
        {
          to: '/product',
          label: this.$t('网络'),
          name: 'product',
          disable: false
        },
        {
          to: '/index',
          label: this.$t('门户'),
          name: 'home',
          disable: false
        },
        {
          to: '/wp',
          label: this.$t('业务'),
          name: 'wp',
          disable: false
        },
        {
          to: '/pp',
          label: this.$t('系统'),
          name: 'pp',
          disable: false
        },
        {
          to: '/message',
          label: this.$t('消息中心'),
          name: 'message',
          disable: false
        }
      ]
    },
    ...mapState('example', {
      storeCount: 'count'
    })
    // ...mapState('user', {
    //   token: 'token'
    // })
  },
  watch: {
    leftNavCopy (leftNavCopy) {
      this.$emit('toggle', leftNavCopy)
    },
    rightNavCopy (rightNavCopy) {
      this.$emit('toggle-right', rightNavCopy)
    }
  },
  created () {
    this.langChange(localStorage.getItem('qLang') || 'zh-hans')
    this.token = sessionStorage.getItem('token')
    this.user = sessionStorage.getItem('userName').substring(9)
  },
  methods: {
    toLogin () {
      this.$router.push({ path: '/account/login' })
    },
    toRegister () {
      this.$router.push({ path: '/account/register' })
    },
    langChange (lang) {
      // quasar组件内 国际化
      import(`quasar/lang/${lang}`).then(l => {
        this.$q.lang.set(l.default)
      })
      // 设置app国际化
      this.$setLocale(lang)
      localStorage.setItem('qLang', lang)
    },
    loginOut () {
      sessionStorage.clear()
      this.$router.push('/account/login')
    },
    onItemClick () {

    },
    navChange (tab) {

    }
  }
}
</script>
